<template>
	<view>
		<nav-bar title="订单详情" :leftBack="back.bind(this)" :bgColor="orderInfo.successFlag==1?'#6ABF6C':'#FF9900'"></nav-bar>
		<image :style="{'top':navHeight+'px'}" class="top-bg" src="https://oss.jxhecong.com/v2/image/charging_done_fail@2x.png" v-if="orderInfo.successFlag == 0"></image>
		<view class="status" :style="{'top':(navHeight+10)+'px'}" v-if="orderInfo.successFlag == 0">充电失败</view>
		<image :style="{'top':navHeight+'px'}" class="top-bg" src="https://oss.jxhecong.com/v2/image/charging_done_success@2x.png" v-if="orderInfo.successFlag == 1"></image>
		<view class="status" :style="{'top':(navHeight+10)+'px'}" v-if="orderInfo.successFlag == 1">充电成功</view>
		<scroll-view :style="{'margin-top':(navHeight+50)+'px'}">
			<view class="card box">
				<view class="card-title">充电桩：{{orderInfo.chargingName}}</view>
				<view class="card-title" style="margin-top:20rpx;">插座号：{{parseInt(orderInfo.code)+1}}号</view>
				<view class="pile-name" style="margin-top:18rpx;">{{orderInfo.chargingGroupName}}</view>
				<view class="line"></view>
				<view class="item-list">
					<view class="item">
						<view style="color:#6ABF6C;font-weight: bold;font-size:28rpx;">
							<text>¥</text>
							<text style="font-size:48rpx;">{{orderInfo.balance}}</text>
							<text>.00</text>
						</view>
						<view class="item-title">账户余额</view>
					</view>
					<view class="item">
						<view style="color:#F29100;font-weight: bold;font-size:28rpx;">
							<text>¥</text>
							<text style="font-size:48rpx;">{{orderInfo.amount}}</text>
							<text>.00</text>
						</view>
						<view class="item-title">消费金额</view>
					</view>
				</view>
			</view>
			<view class="card box" style="margin-top:24rpx;">
				<view class="item-field">
					<text>订单编号</text>
					<text>{{orderInfo.orderNumber}}</text>
				</view>
				<view class="item-field">
					<text>下单用户</text>
					<text>{{orderInfo.memberMobile}}</text>
				</view>
				<view class="item-field" v-if="orderInfo.billingType==0">
					<text>充电模式</text>
					<text>时长充电</text>
				</view>
				<view class="item-field" v-if="orderInfo.billingType==0">
					<text>预充时长</text>
					<text>{{orderInfo.totalChargingTime}}分钟</text>
				</view>
				<view class="item-field" v-if="orderInfo.billingType==1">
					<text>充电模式</text>
					<text>金额充电</text>
				</view>
				<view class="item-field" v-if="orderInfo.billingType==1">
					<text>充电金额</text>
					<text>{{orderInfo.chargeAmount}}元</text>
				</view>
				<view class="item-field" v-if="orderInfo.billingType==2">
					<text>充电模式</text>
					<text>充满自停</text>
				</view>
				<view class="item-field">
					<text>开始时间</text>
					<text>{{orderInfo.createDate}}</text>
				</view>
				<view class="item-field">
					<text>结束时间</text>
					<text>{{orderInfo.endDate?orderInfo.endDate:''}}</text>
				</view>
				<view class="item-field">
					<text>充电时间</text>
					<text>{{orderInfo.chargingTime}}分钟</text>
				</view>
				<view class="item-field" v-if="this.deviceType == 1">
					<text>充电时间</text>
					<text>{{orderInfo.chargingElec}}分钟</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	var globalData = getApp({
		allowDefault: true
	}).globalData
	import navBar from '../components/navBar.vue'
	import * as orderApi from '../../api/order/index.js'
	export default{
		components:{navBar},
		data(){
			return{
				navHeight:0,
				orderNumber:'',
				deviceType:'',
				orderInfo:{},
				from:'',
			}
		},
		onLoad(options) {
			this.orderNumber = options.orderNumber
			this.deviceType = options.deviceType
			this.navHeight = globalData.titleHeight;
			this.from=options.from;
			if(options.from!='orderList'){
				// #ifdef APP-PLUS
				let currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
				currentWebview.setStyle({ popGesture: 'none' })
				// #endif
			}
			this.getOrderDetail();
		},
		onShow() {
			// #ifdef MP
			uni.hideHomeButton()
			// #endif
		},
		methods:{
			back(){
				if(this.from=='orderList'){
					uni.navigateBack({
						delta:1
					})
				}
				else{
					uni.reLaunch({
						url:'/pages/index/index'
					})
				}
			},
			getOrderDetail(){
				if(this.deviceType == 0){
					orderApi.getOrderDetail(this.orderNumber).then((res)=>{
						console.log(res.data)
						this.orderInfo = res.data
					})
				}else{
					orderApi.getCarOrderDetail(this.orderNumber).then((res)=>{
						console.log(res.data)
						this.orderInfo=res.data
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-bg{
		position: fixed;
		left:0rpx;
		right:0rpx;
		height:202rpx;
		width:100%;
	}
	.card{
		background: #FFFFFF;
		box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
		border-radius: 9px;
		margin-left:30rpx;
		margin-right:30rpx;
		overflow: hidden;
	}
	.box{
		padding:30rpx;
	}
	.status{
		position: fixed;
		top:28rpx;
		left:30rpx;
		height:40rpx;
		width:200rpx;
		color:#FFFFFF;
		font-size:36rpx;
		font-weight: bold;
	}
	.card-title{
		color:#303133;
		font-size:32rpx;
	}
	.pile-name{
		color:#909399;
		font-size:28rpx;
	}
	.item-list{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.item{
			flex:1;
			display:flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.item-title{
			color:#303133;
			font-size:28rpx;
		}
	}
	.line{
		height:1rpx;
		background-color:#DCDFE6;
		margin-top:32rpx;
		margin-bottom:32rpx;
	}
	.item-field{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom:20rpx;
	}
	.item-field:last-child{
		margin-bottom:0rpx;
	}
	.item-field>text:first-child{
		color:#909399;
		font-size:28rpx;
	}
	.item-field>text:last-child{
		color:#303133;
		font-size:28rpx;
	}
</style>
